import SdCard from '@/components/sd-card/sd-card.vue'

export default {
	data() {
		return {
			lala: null
		}
	},
	/*注意，这里的json是可以不写value的，所以data里的lala应该也是可以不写默认值，只不过这时候无法确认其类型*/
	components: {
		SdCard
	},
	created() {
		this.lala = '石头mm'
		// $refs是获取所有的ref，然后后面接这个ref的值（所以不能用a-sd-card的值），这样就获取到了这个子组件对象，然后调用其方法
		// 注意，不能在这个位置调用this.$refs.aSdCard，因为此时还没有渲染完成，而ref是要组件完全渲染后才创建对应的对象并赋值到this.$refs里
		// 所以可以在methods里某个方法里用这个，然后通过一个按钮点击触发该方法，或者用this.$nextTick(() => {})
		//this.$refs.aSdCard.test()
		this.$nextTick(() => {
			this.$refs.aSdCard.test()
		})
	},
	computed: {
		/*TODO 重要，以后用vuex不要用所谓的getters，主要是state支持响应式更新，然后事件接收后的业务操作也是在对应组件
		  的计算属性里进行操作，所以完全没必要再加一层getters，最重要的是getters在模块化Vuex里会有很大的不一致性*/
		notShowFooter() {
			return !this.$store.state.showFooter;
		},
		formattedUserAge() {
			// 这样子是可以执行的，但是不符合获取数据应该用getters（而且这种貌似还没有响应式更新？经过测试有）
			// 还有就是写法应该是this.$store.user.state.userAge才更符合直观，可惜不是这样。。
			//return '[' + this.$store.state.user.userAge + ']'
			return '[' + this.$store.state.$user.userAge + ']'
		}
	}
}